/**
 * @description 工具栏：查询组件
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row } from 'antd';
import { FirstHeaderC, TableC } from '../../../../../comps';
import myStyle from './index.less';
import moment from 'moment';

@Form.create()
class BasicEvent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      bondID: '',
      dataSource1: [],
      columns1: [],
      dataSource2: [],
      columns2: [],
      pageInfo2: {},
      pageInfo1: {},
    };
  }

  componentDidMount() {
    // 调用枚举接口
    this.getTableData();
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 判断是否是最新的bondID
    if (nextProps.bondID != this.state.bondID) {
      this.setState(
        {
          bondID: nextProps.bondID,
        },
        () => {
          this.props.form.resetFields();
          this.changeAllData();
        },
      );
    }
  }

  // bondId改变重新渲染页面
  changeAllData = () => {
    const { dispatch } = this.props;
    const data = {
      bondID: this.state.bondID,
      currentPage: 1,
      numInPage: 20,
    };
    // 获取到期表格数据
    dispatch({
      type: 'basicEventM/findTableData3',
      payload: data,
      callback: (res) => {
        this.setState({
          dataSource1: res.data.dataSource,
          columns1: res.data.columns,
          pageInfo1: res.data.pageInfo,
        });
      },
    });
    // 获取行权表格数据
    dispatch({
      type: 'basicEventM/findTableData4',
      payload: data,
      callback: (res) => {
        this.setState({
          dataSource2: res.data.dataSource,
          columns2: res.data.columns,
          pageInfo2: res.data.pageInfo,
        });
      },
    });
    const datas = {};
    datas.currentPage = 1;
    datas.numInPage = 500;
    datas.bondID = this.state.bondID;
    datas.agency = ['0', '1', '2'];
    datas.nature = ['0', '1'];
    datas.range = true;
  };

  // 获取表格数据
  getTableData = () => {
    const { dispatch } = this.props;
    // 获取到期表格数据
    dispatch({
      type: 'basicEventM/findTableData3',
      payload: {
        bondID: this.props.bondID,
        currentPage: 1,
        numInPage: 20,
      },
      callback: (res) => {
        this.setState({
          dataSource1: res.data.dataSource,
          columns1: res.data.columns,
          pageInfo1: res.data.pageInfo,
        });
      },
    });

    // 获取行权表格数据
    dispatch({
      type: 'basicEventM/findTableData4',
      payload: {
        bondID: this.props.bondID,
        currentPage: 1,
        numInPage: 20,
      },
      callback: (res) => {
        this.setState({
          dataSource2: res.data.dataSource,
          columns2: res.data.columns,
          pageInfo2: res.data.pageInfo,
        });
      },
    });
  };

  // 到期表格日期变色
  dateColor = (text) => {
    const date = moment().format('YYYY-MM-DD');
    const oDate1 = new Date(date);
    const oDate2 = new Date(text);
    if (oDate1.getTime() > oDate2.getTime()) {
      return <span className='textColor'>{text}</span>;
    } else {
      return <span className='textColor2'>{text}</span>;
    }
  };

  // 到期表格靠右
  setColumns1 = (columns) => {
    const arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.key == 'yield' || item.key == 'nextPar') {
          item.type = 'number';
        } else if (item.key == 'currentInterest' || item.key == 'currentCash') {
          item.type = 'money';
        } else if (item.title == '日期') {
          item.render = (text, record) => {
            return this.dateColor(text);
          };
        }
      });
    }
    return arr;
  };

  // 行权表格
  setColumns2 = (columns) => {
    const arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.key == 'xqPrice' || item.key == 'xqAmount') {
          item.type = 'money';
        }
      });
    }
    return arr;
  };

  // 选择框组件需要的数据格式
  changeSelect = (e) => {
    const arr = [];
    if (e && e.length) {
      e.map((item) => {
        arr.push({
          title: item.value,
          value: item.code,
        });
      });
    }
    return arr;
  };

  // 到期表格change事件
  onTableChange = (current, size) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'basicEventM/findTableData3',
      payload: {
        bondID: this.state.bondID,
        currentPage: current,
        numInPage: size,
      },
      callback: (res) => {
        this.setState({
          dataSource1: res.data.dataSource,
          columns1: res.data.columns,
          pageInfo1: res.data.pageInfo,
        });
      },
    });
  };

  // 行权表格change事件
  onTableChange1 = (current, size) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'basicEventM/findTableData4',
      payload: {
        bondID: this.props.bondID,
        currentPage: current,
        numInPage: size,
      },
      callback: (res) => {
        this.setState({
          dataSource1: res.data.dataSource,
          columns1: res.data.columns,
          pageInfo2: res.data.pageInfo,
        });
      },
    });
  };

  // 付息/到期表格
  paymentTable = () => {
    const { dataSource1, columns1, pageInfo1 } = this.state;
    const newColumns = this.setColumns1(columns1);
    return (
      <div style={{ marginTop: '20px' }}>
        <FirstHeaderC title='付息/到期兑付' />
        <div>
          <TableC
            columns={newColumns}
            dataSource={dataSource1}
            current={pageInfo1 && pageInfo1.currentPage}
            total={pageInfo1.total}
            pageSize={pageInfo1.numInPage}
            onShowSizeChange={(current, size) => this.onTableChange(current, size)}
            onPageChange={(page, pageSize) => this.onTableChange(page, pageSize)}
          />
        </div>
      </div>
    );
  };

  // 行权表格信息
  tableRender = () => {
    const { dataSource2, columns2, pageInfo2 } = this.state;
    const newColumns2 = this.setColumns2(columns2);
    return (
      <div>
        <FirstHeaderC title='行权' />
        <div>
          <TableC
            columns={newColumns2}
            dataSource={dataSource2}
            current={pageInfo2 && pageInfo2.currentPage}
            total={pageInfo2.total}
            pageSize={pageInfo2.numInPage}
            onShowSizeChange={(current, size) => this.onTableChange1(current, size)}
            onPageChange={(page, pageSize) => this.onTableChange1(page, pageSize)}
          />
        </div>
      </div>
    );
  };

  render() {
    return (
      <div className={myStyle.tabBody}>
        <div className='tabTable2'> {this.paymentTable()} </div>
        <div className='tabTable2'> {this.tableRender()} </div>
      </div>
    );
  }
}
export default connect(({ basicEventM }) => ({ basicEventM }))(BasicEvent);
